.tool-bar {
  padding: 5px;
  height: 40px;
  background-color: #00abff;
}
.department-bar{
  float: left;
  margin-right: 20%;
}
.button-bar{
  float: left;
}
.search-bar {
  float: right;
}
.time-ctrl{
  margin-left:46% ;
}
.search-bar{
  margin-top: -30px;
}

.col-style{
  padding: 0;
}
.water-control{
  height:330px;
  background: url(/assets/images/waterc.jpg) no-repeat;
  position: relative;
  background-size:330px 330px ;
}
.water{
  position: absolute;
  right:210px;
  font-size: 10px;
}
.water-1{
  top:80px;
  color: #4b476a;
}
.water-2{
  top:95px;
  color: #d0c645;
}
.water-3{
  top:229px;
  color: #8b6e72;
}
/*可变*/
.now-level{
  width:160px;
  height:15px;
  position: absolute;
  bottom:180px;
  left:165px
}
.water-4{
  font-size: 10px;
  position: absolute;
  right:0;
  top:0;
  color: #9ac0ab;
}
.line{
  position: absolute;
  left:0;
  bottom:0;
  height:2px;
  width:80px;
  background:#9ac0ab;
}
.button {
  float:left;
  margin-right: 20px;
  font-size: 14px
}
.status-bar{
  margin-top: 5px;
  border-top: 1px;
  border-left:2px;
  border-bottom: 4px;
  border-right: 1px;
  border-style: solid;
  border-radius: 3px;
  border-color: #bfbfbf;
}
.status-name{
  text-indent:-10px
}
.status-icon{
  height:12px;
  margin-top:7px;
  border-radius: 10%;
}
.status-icon-1{
  background: #a59b82;
}
.status-icon-2{
  background: #3ec222;
}
.status-icon-4{
  background: #fcc81d;
}
.status-icon-5{
  background: #ef7b26;
}
.status-icon-6{
  background: #ed4227
}
.status-switch{
  float: left;
  width: 33%;
  line-height: 25px
}
.status-switch2{
  float: left;
  width: 100%;
  line-height: 25px
}
.active{
  border: 1px solid #5ec8ff;
}

@media screen and (min-width: 1850px){
  .water-control{
    height:330px;
    background: url(/assets/images/waterc.jpg) no-repeat;
    position: relative;
    background-size:473px 330px ;
  }
  .water{
    position: absolute;
    right:290px;
    font-size: 10px;
  }
  .now-level{
    width:160px;
    height:15px;
    position: absolute;
    bottom:180px;
    left:235px
  }
}
